<template>
	<button
		:style="cStyle"
		:class="cClasses"
		:hover-class="color ? null : 'hover'"
		:loading="loading"
		:disabled="disabled"
		@click="handleClick"
	>
		<slot></slot>
	</button>
</template>

<script setup>
	/**
	 * Button 按钮
	 * @description c-button 常用的操作按钮
	 * @property { String } type = [default|primary|success|warning|error|info] 按钮类型
	 * @property { String } size = [default|mini|small|medium|large] 按钮尺寸
	 * @property { String } openType 按钮开放能力
	 * @property { String } color 自定义按钮颜色 待完善
	 * @property { Boolean }  round  是否为圆角按钮
	 * @property { Boolean }  plain  是否为朴素按钮
	 * @property { Boolean }  loading  是否为加载中状态
	 * @property { Boolean }  disabled  按钮是否为禁用状态
	 * @event { Function } click 按钮点击事件
	 * @example <c-button type="primary">按钮</c-button>
	 */

	import { computed } from 'vue';
	import { TinyColor } from '@ctrl/tinycolor';
	import _props from './props.js';

	const props = defineProps(_props);
	const emits = defineEmits(['click']);

	const cClasses = computed(() => {
		const { type, size, loading, disabled, plain, block } = props;
		return [
			'c-button',
			type ? 'c-button--' + type : null,
			size ? 'c-button--font-' + size : null,
			block ? 'block' : null,
			{ disabled, loading, plain }
		];
	});

	const cStyle = computed(() => {
		let style = {};
		const { round, color, size } = props;
		const tColor = new TinyColor(color);
		if (round) {
			style = {
				borderRadius: '100px',
				padding: size == 'small' || size == 'mini' ? '0 1em' : '0 1.2em',
				background: color ? tColor.toString() : null,
				borderColor: color ? tColor.toString() : null,
				color: color ? (tColor.isDark() ? '#fff' : '#000') : null
			};
		}
		if (color) {
			style = {
				background: tColor.toString(),
				borderColor: tColor.toString(),
				color: tColor.isDark() ? '#fff' : '#303133'
			};
		}
		return style;
	});

	function handleClick() {
		if (!props.loading && !props.disabled) {
			emits('click');
		}
	}
</script>

<style lang="scss">
	@mixin button-type($type, $color, $border-color) {
		background-color: $type;
		color: $color;
		border-color: $border-color;
		&.hover {
			background-color: mix($black-color, $type, 10%);
		}
		&.loading,
		&.disabled {
			background-color: mix($white-color, $type, 60%);
			color: $inverse-color;
			border-color: mix($white-color, $type, 60%);
			cursor: not-allowed;
		}
		&.plain {
			background-color: mix($white-color, $type, 95%);
			color: $type;
			border-color: $type;
			&.hover {
				background-color: $type;
				color: $inverse-color;
			}
		}
	}

	@mixin button-size($height, $size) {
		height: $height;
		font-size: $size;
	}

	.c-button {
		@include f-center($inline: inline-flex);
		height: 64rpx;
		margin: 0;
		padding: 0 0.8em;
		background-color: $bg-inverse-color;
		font-size: $font-28;
		color: $main-color;
		border: 1rpx solid transparent;
		line-height: normal;
		box-sizing: border-box;
		border-radius: $radius-8;
		&::after {
			border: none;
		}
		&.block {
			display: flex;
		}
		&--font-mini {
			@include button-size(48rpx, $font-24);
		}
		&--font-small {
			@include button-size(54rpx, $font-28);
		}
		&--font-medium {
			@include button-size(70rpx, $font-30);
		}
		&--font-large {
			@include button-size(80rpx, $font-36);
		}
		&--default {
			@include button-type($bg-inverse-color, $main-color, #dcdfe6);
		}
		&--primary {
			@include button-type($primary-color, $inverse-color, $primary-color);
		}
		&--success {
			@include button-type($success-color, $inverse-color, $success-color);
		}
		&--warning {
			@include button-type($warning-color, $inverse-color, $warning-color);
		}
		&--error {
			@include button-type($error-color, $inverse-color, $error-color);
		}
		&--info {
			@include button-type($info-color, $inverse-color, $info-color);
		}
	}
</style>
